<template>
  <el-container>
    <el-aside width="200px">
      <el-menu default-openeds="1">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-caret-right"></i>
            <span>会员管理</span>
          </template>
          <el-menu-item index="1-1">所有会员</el-menu-item>
          <el-menu-item index="1-2">新增会员</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>会员列表</el-header>
      <el-main>
        <el-table :data="tableData" stripe>
          <!-- 此处省略表头和内容 -->
        </el-table>
      </el-main>
    </el-container>
    <el-dialog title="新增会员" :visible.sync="dialogFormVisible">
      <el-form ref="form" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <!-- 此处省略其他表单项 -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="createMember">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      tableData: [], //所有会员数据
      dialogFormVisible: false, //新增会员表单显示状态
      form: { name: "" }, //新增会员表单
    };
  },
  methods: {
    createMember() {
      //新增会员
      this.tableData.push(this.form);
      this.dialogFormVisible = false;
    },
  },
};
</script>
